// import { addRule, removeRule, rule, updateRule } from '@/services/api/auth';
import { delItem, getList } from '@/services/api/assetTypes';
import { AssetTypesResultItem } from '@/services/api/model/assetTypesModel';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Button, Image, Popconfirm } from 'antd';
import React, { useRef } from 'react';
import FormModal from './components/CreateForm';

const GatewayType: React.FC = () => {
  const actionRef = useRef<ActionType>();
  //提交
  const onSubmit = () => {
    // 重置到默认值，包括表单
    // 断言标识,reloadAndRest一定是存在的
    actionRef.current!.reloadAndRest!();
  };
  /**
   * @en-US Pop-up window of new window
   * @zh-CN 新建窗口的弹窗
   *  */

  // 删除
  const handleConfirm = async (id: string) => {
    // 这里 return 一个 primise 之后会执行异步关闭 resolve(null) 之后关闭
    try {
      await delItem(id);
      actionRef.current!.reloadAndRest!();
      Promise.resolve(null);
    } catch (error) {
      Promise.resolve(null);
    }
  };
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */

  const columns: ProColumns<AssetTypesResultItem>[] = [
    {
      title: '名称',
      align: 'center',
      dataIndex: 'name',
    },
    {
      title: '图片',
      dataIndex: 'imageUrl',
      key: 'image',
      valueType: 'image',
      align: 'center',
      // renderText: (text) => IMG_URL + text,
      render: (_, record) => <Image src={IMG_URL + record.imageUrl} width={100} />,
    },
    {
      title: '品牌',
      align: 'center',
      dataIndex: 'brand',
    },
    {
      title: 'CPU',
      align: 'center',
      dataIndex: 'cpu',
    },
    {
      title: '硬盘',
      align: 'center',
      dataIndex: 'hardDisk',
    },
    {
      title: '内存',
      align: 'center',
      dataIndex: 'memory',
    },
    {
      title: '型号',
      align: 'center',
      dataIndex: 'model',
    },
    {
      title: '描述',
      align: 'center',
      dataIndex: 'description',
    },
    {
      title: '操作',
      width: 100,
      align: 'center',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <FormModal
          trigger={<Button type="text">编辑</Button>}
          onSubmit={onSubmit}
          key={'edit'}
          title="编辑"
          itemToken={record.token}
        ></FormModal>,
        <Popconfirm key={'del-1'} title="确定删除吗" onConfirm={() => handleConfirm(record.token!)}>
          <Button key={'del1'} danger style={{ width: '100%' }} size="small" type="text">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable<AssetTypesResultItem, API.PageParams>
        actionRef={actionRef}
        rowKey="id"
        search={false}
        toolBarRender={() => [<FormModal key={'add'} onSubmit={onSubmit}></FormModal>]}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params: API.PageParams,
        ) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改
          const msg = await getList({
            page: params.page,
            pageSize: params.pageSize,
          });
          return {
            data: msg.results,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: msg.numResults,
          };
        }}
        columns={columns}
      />
    </PageContainer>
  );
};
export default GatewayType;
